<template>
    <view class="page">
        <view class="step-wrap">
            <view class="active">身份认证</view>
            <view :class="{active:page>1}">驾驶证认证</view>
        </view>

        <view class="card" v-if="page==1">
            <view class="title">请按照示例图提交身份证照片</view>
            <view class="img-wrap">
                <image :src="formData.idCardImg|mmvImageUrl" @click="onCheckIdCard(1)"></image>
                <image :src="formData.idCardImgBack|mmvImageUrl" @click="onCheckIdCard(2)"></image>
            </view>
            <view class="desc">请核对您的身份证信息，若信息有误请重新扫描</view>
            <view class="list">
                <view class="label">姓名 <text>{{formData.customerName}}</text></view>
                <view class="label">身份证号 <text>{{formData.idCardNo}}</text></view>
                <view class="label">失效日期 <text>{{formData.idCardExpirydate}}</text></view>
            </view>
        </view>

        <view class="card" v-if="page==2">
            <view class="title">请按照示例图提交驾驶证照片</view>
            <view class="img-wrap">
                <image :src="formData.driverImg|mmvImageUrl" @click="onCheckIdCard(3)"></image>
                <image :src="formData.driverImgBack|mmvImageUrl" @click="onCheckIdCard(4)"></image>
            </view>
            <view class="desc">请核对您的身份证信息，若信息有误请重新扫描</view>
            <view class="list">
                <view class="label">档案编号 <text>{{formData.driverNo}}</text></view>
                <view class="label">准驾车型 <text>{{formData.quasiDrivingType}}</text></view>
                <view class="label">失效日期 <text>{{formData.driverValidity}}</text></view>
            </view>
        </view>

        <view class="tip">本人承诺证件真实有效，由此产生的法律责任由本人承担</view>
        <view class="tip2" v-if="false">信息完善奖励积分</view>
        <view class="bottom-button" @click="next">{{1==page ? '下一步' : '认证'}}</view>
    </view>
</template>

<script>

import {
	recognitionCertificate,
	authentication,
	uploadfiles
} from '../../api/mine-api.js'

export default {
    data() {
        return {
            page: 1,
            formData: {
                idCardImg: "/static/user/idCardImg.jpg", // 身份证正面
                idCardImgBack: "/static/user/idCardImgBack.jpg", // 身份证背面
                driverImg: "/static/user/driverImg.jpg", // 驾驶证正页
                driverImgBack: "/static/user/driverImgBack.jpg", // 驾驶证副页
                customerName: "", // 姓名
                idCardNo: "", // 身份证号
                idCardExpirydate: "", // 身份证失效日期
                driverNo: "", // 驾驶证号
                quasiDrivingType: "", // 准驾车型
                driverValidity: "", // 驾驶证失效日期
                idCardZPath: "", //身份证正面
                idCardFPath: "", // 身份证反面
				driverZPath : "",//驾驶证正面
				driverFPath : "", //驾驶证反面
            },
            redirect: "",
        };
    },
    computed: {
        // openid() {
        //     return this.$store.state.user.openid;
        // },
        // deptId() {
        //     return this.$store.state.user.deptId;
        // },
    },
    watch: {
        // openid(val) {
        //     this.validate();
        // },
    },
    onLoad(op) {
       
    },
 
    methods: {
        
        /**
         * 选择图片
         */
        async chooseImage() {
            return new Promise((resolve, reject) => {
                uni.chooseImage({
                    success({ tempFilePaths }) {
                        resolve(tempFilePaths);
                    },
                    fail(err) {
                        // uni.showToast({ title: '图片选择失败', icon: 'error' });
                        reject(err);
                    }
                })
            });
        },
        /**
         * 上传图片
         */
        async upload(url) {
            uni.showToast({ title: '图片上传中...', icon: 'loading' });
            try {
				
                const result = await uploadfiles({
                    name: 'file',
                    filePath: url,
                });
                uni.showToast({ title: '图片上传成功', icon: 'success' });
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 提交身份证|驾驶证
         */
        async onCheckIdCard(type) {
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                 recognitionCertificate({
                    url: url.data.saveUrl,
                    type : type,
					
                }).then(res=>{
					if (type == 1) {//身份证正面
					    this.formData.idCardZPath = url.data.saveUrl;
					    this.formData.idCardImg = url.data.url;
					    this.formData.customerName = res.data.name;
					    this.formData.address = res.data.address;
					    this.formData.idCardNo = res.data.idCard;
					}
					if (type == 2) {//身份证反面
					    this.formData.idCardFPath = url.data.saveUrl;
					    this.formData.idCardImgBack = url.data.url;
					    this.formData.startDate = res.data.startTime;
					    this.formData.idCardExpirydate = res.data.endTime;
					}
						
					if(type == 3) {//驾驶证正面
					    this.formData.driverZPath = url.data.saveUrl;
					    this.formData.driverImg = url.data.url;
						this.formData.driverNo = res.data.driverNo;
						this.formData.quasiDrivingType = res.data.driverType;
						this.formData.driverValidity = res.data.endTime;
					}
					
					if(type == 4) {//驾驶证反面
					    this.formData.driverFPath = url.data.saveUrl;
						this.formData.driverImgBack = url.data.url;;
					}
					
				});
               
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 下一步
         */
        async next() {
            if (this.page == 1) {
                if (!this.formData.idCardImg || this.formData.idCardImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证人像', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardImgBack || this.formData.idCardImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证国徽', icon: 'error' });
                    return;
                }
                if (!this.formData.customerName) {
                    uni.showToast({ title: '缺少姓名', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardNo) {
                    uni.showToast({ title: '缺少身份证号', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardExpirydate) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                this.page = 2;
            } else {
                if (!this.formData.driverImg || this.formData.driverImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证正页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverImgBack || this.formData.driverImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证副页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverNo) {
                    uni.showToast({ title: '缺少驾驶证号', icon: 'error' });
                    return;
                }
                if (!this.formData.quasiDrivingType) {
                    uni.showToast({ title: '缺少准驾车型', icon: 'error' });
                    return;
                }
                if (!this.formData.driverValidity) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                await this.submit();
            }
        },
        /**
         * 提交认证信息
         */
        async submit() {
            this.formData.deptId = this.deptId;
            try {
              authentication({
					memberNo : this.$store.state.user.userInfo.memberNo,
					memberName : this.formData.customerName,
					contactAddress : this.formData.address,
					cardId : this.formData.idCardNo,
					cardValidity : this.formData.idCardExpirydate,
					drivingId : this.formData.driverNo,
					drivingType : this.formData.quasiDrivingType,
					drivingValidity : this.formData.driverValidity,
					jsUrl : [this.formData.driverZPath, this.formData.driverFPath],
					sfUrl : [this.formData.idCardZPath, this.formData.idCardFPath],
				}).then(res=> {
					if(res.code == 200) {
						uni.showToast({ title: '完成' });
						//缓存认证状态
						this.$store.commit('user/saveCensorStatus', 2);
						uni.setStorageSync('censorStatus', 2);
						uni.$emit('loginRefresh');
						uni.navigateBack({
							
						})
					}
				});
                
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        }


    },
}
</script>

<style lang="scss" scoped>
.page {
    padding: $page_padding;
}
.step-wrap {
    margin-top: 53upx;
    margin-bottom: 35upx;
    display: flex;
    justify-content: center;
    view {
        background: #cfcfcf;
        color: #fff;
        font-size: 28upx;
        font-weight: bold;
        padding: 21upx 44upx;
        border-radius: 35px;
    }
    view + view {
        margin-left: 176upx;
    }
    .active {
        background: $main-color;
    }
}

.card {
    padding: 40upx 16upx;
    margin-bottom: 30upx;
    .title {
        font-size: 28upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 29upx;
    }
    .img-wrap {
        margin-bottom: 34upx;
        display: flex;
        justify-content: space-between;
        image {
            width: 330upx;
            height: 184upx;
        }
    }
    .desc {
        margin-bottom: 49upx;
        font-size: 26upx;
        font-weight: bold;
        color: #999;
    }

    .list {
        .label {
            margin-bottom: 28upx;
            font-size: 28upx;
            font-weight: bold;
            color: #333;
            display: flex;
            justify-content: space-between;
        }
    }
}
.tip {
    font-size: 24upx;
    font-weight: bold;
    color: #eb314f;
    text-align: center;
}
.tip2 {
    width: 100%;
    font-size: 26upx;
    font-weight: bold;
    text-align: center;
    color: #232323;
    position: fixed;
    bottom: 113upx;
}
.bottom-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    line-height: 96upx;
    background: $main-color;
    text-align: center;
    color: #fff;
}
</style>
